<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>人体生物钟</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/app.css" />
	</head>

	<body style="background: #fff;">
		<div class="mui-content" style="background: #fff;">
			<div id="psiSliders" class="mui-slider">
				<div id="psiSliderItems" class="mui-slider-group">
				</div>
				<div id="psiSliderIndicators" class="mui-slider-indicator">
				</div>
			</div>
			<div id="my" class="my"></div>
		</div>

		<script type="text/javascript" src="../js/template.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/psi.js"></script>
		<script type="text/javascript" src="../js/echarts.common.min.js"></script>
		<script type="text/javascript" src="../js/theme/psi-chart.js"></script>

		<script type="text/javascript" src="../js/calendar.js"></script>
		<script type="text/javascript" src="../js/app.js"></script>
		<script id="psi-tpl" type="text/html">
			<div id="psi-tip-{{psi.id}}" class="descn">亲爱的{{psi.name}}({{psi.gender}})，您的阳历生日是{{psi.birthday}}，农历生日{{lunar.lYear}}-{{lunar.lMonth}}-{{lunar.lDay}}(肖{{lunar.Animal}})，今天是{{today}}，您已经在美丽的地球上生活了{{life}}天，期待每天生活更精彩！</div>
			<div id="psi-{{psi.id}}" class="chart"></div>
			<div class="btns">
				<button type="button" class="mui-btn mui-btn-primary" id="pre-btn-{{psi.id}}">上一月</button>
				<button type="button" class="mui-btn mui-btn-danger" id="current-btn-{{psi.id}}">本月</button>
				<button type="button" class="mui-btn mui-btn-primary" id="next-btn-{{psi.id}}">下一月</button>
			</div>
		</script>

		<script type="text/javascript" charset="utf-8">
			mui.init();
			var nwaiting;
			var dftPsis = [{
				id: 1,
				name: "刘玖武",
				gender: "男",
				birthday: "1981-11-20"
			}];
			var psis = [];
			var textStyle = {
				fontSize: 16,
				fontWeight: 'bolder',
				color: '#666'
			};

			function getChartOption(weiPsi, psi) {
				var viewDataStrs = weiPsi.viewDate.format('yyyy-MM-dd').split("-");
				var option = {
					title: {
						text: viewDataStrs[0] + "年" + viewDataStrs[1] + "月",
						textStyle: textStyle
					},
					tooltip: {
						trigger: 'axis',
						//formatter: viewDataStrs[1] + '月{b0}日<br/>{a0}: {c0}<br/>{a1}: {c1}<br/>{a2}: {c2}',
						textStyle: {
							fontSize: 12
						}
					},
					legend: {
						selectedMode: false,
						top: "4",
						right: "10",
						data: ['体力', '情绪', '智力']
					},
					toolbox: {
						show: false
					},
					//backgroundColor: "#fff",
					calculable: false,
					grid: {
						'x': 40,
						'x2': 15,
						'y': 35,
						'height': 150
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: weiPsi.xAxisData
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}'
						},
						min: -100,
						max: 100,
						splitNumber: 10
					}],
					series: [{
						name: '体力',
						type: 'line',
						smooth: true,
						data: weiPsi.seriesData.physical
					}, {
						name: '情绪',
						type: 'line',
						smooth: true,
						data: weiPsi.seriesData.sensitive
					}, {
						name: '智力',
						type: 'line',
						smooth: true,
						data: weiPsi.seriesData.intellectual
					}]
				};
				return option;
			}

			function getWeiPsi(psi, viewDate) {
				var weiPsi = new WeiPsi(psi, viewDate);
				weiPsi.seriesData();
				return weiPsi;
			}

			function refreshPsi(chart, psi, viewDate) {
				chart.setOption(getChartOption(getWeiPsi(psi, viewDate), psi));
			}
			var weiPsis = [];

			function createChart(psi, viewDate) {
				var cday = viewDate.getDate();
				var weiPsi = getWeiPsi(psi, viewDate);
				weiPsis.push(weiPsi);
				var psiDiv = document.getElementById("slider" + psi.id);
				psiDiv.innerHTML = template('psi-tpl', weiPsi);
				var chart = echarts.init(document.getElementById("psi-" + weiPsi.psi.id), "psi-chart");
				refreshPsi(chart, weiPsi.psi, viewDate);
				document.getElementById('current-btn-' + weiPsi.psi.id).addEventListener('tap', function() {
					var curWeiPsi = weiPsis[weiPsi.psi.id - 1];
					curWeiPsi.viewDate = new Date();
					refreshPsi(chart, curWeiPsi.psi, curWeiPsi.viewDate);
				});
				document.getElementById('pre-btn-' + weiPsi.psi.id).addEventListener('tap', function() {
					var curWeiPsi = weiPsis[weiPsi.psi.id - 1];
					curWeiPsi.viewDate.setMonth(curWeiPsi.viewDate.getMonth() - 1);
					refreshPsi(chart, curWeiPsi.psi, curWeiPsi.viewDate);
				});
				document.getElementById('next-btn-' + weiPsi.psi.id).addEventListener('tap', function() {
					var curWeiPsi = weiPsis[weiPsi.psi.id - 1];
					curWeiPsi.viewDate.setMonth(curWeiPsi.viewDate.getMonth() + 1);
					refreshPsi(chart, curWeiPsi.psi, curWeiPsi.viewDate);
				});
			};

			function renderChart() {
				psis = userData(plus.storage.getItem("$userList"));
				if (psis.length == 0) {
					psis = dftPsis;
				}
				var psiSliderItems = document.getElementById("psiSliderItems");
				var psiSliderIndicators = document.getElementById("psiSliderIndicators");
				for (idx in psis) {
					var sliderItem = document.createElement("div");
					sliderItem.id = "slider" + (idx * 1 + 1);
					sliderItem.className = "mui-slider-item psi";
					psiSliderItems.appendChild(sliderItem);
					var psiSliderIndicator = document.createElement("div");
					psiSliderIndicator.className = "mui-indicator";
					if (idx == 0) {
						psiSliderIndicator.className = psiSliderIndicator.className + " mui-active";
					}
					psiSliderIndicators.appendChild(psiSliderIndicator);
				}
				if (psis.length > 0) {
					createChart(psis[0], new Date());
					mui('.mui-slider').slider().gotoItem(0);
					document.querySelector('.mui-slider').addEventListener('slide', function(event) {
						var idx = event.detail.slideNumber;
						if (!weiPsis[idx]) {
							createChart(psis[idx], new Date());
						}
					});
				}
			};

			function baiduAd() {
				if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
					mui.toast("当前网络不给力，无法加载广告");
				} else {
					//屏幕真实宽度
					var width = window.innerWidth;
					var height = window.innerHeight;
					//根据投放广告的比例，计算广告高度
					var adHeight = parseInt(width) * 3 / 20;
					//广告投放域名地址
					var ltu = encodeURIComponent('http://www.dcloud.io/ad/');
					//投放广告的服务端页面标题
					var title = encodeURIComponent('DCloud HBuilder-做最好的HTML5开发工具||MUI-最接近原生体验的高性能前端框架');
					var url = 'http://pos.baidu.com/acom?adn=1&at=97&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=18&ch=0&col=en-US&conOP=0&cpa=1&dai=1&dis=0&ltr=&lunum=6&n=99099160_cpr&pis=10000x10000&ps=0x0&qn=31f2f2a7de233256&rad=&rsi5=4&rss0=&rss1=&rss2=&rss3=&rss4=&rss5=&rss6=&rss7=&scale=20.3&skin=mobile_skin_white_blue&td_id=2206321&tn=template_inlay_all_mobile&tpr=1436841400149&ts=1&xuanting=0&tt=1436841400136.14.87.89&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&wt=1&distp=1001';
					url += '&conW=' + width + '&conH=' + adHeight + '&ltu=' + ltu;
					url += '&di=u2206321'; //广告id
					url += '&pcs=' + width + 'x' + height;
					url += '&psr=' + width + 'x' + height;
					url += '&pss=' + width + 'x0';
					url += '&rsi0=' + width + '&rsi1=' + adHeight;
					url += '&ti=' + title;
					var adBottom = mui.os.ios ? ('-' + adHeight + 'px') : '0';
					var ad = plus.webview.create(url, 'ad', {
						height: adHeight + 'px',
						bottom: adBottom
					});
					//目前Android平台不支持子webview的setStyle动画，因此分平台处理；
					if (mui.os.ios) {
						//为了支持iOS平台左侧边缘滑动关闭页面，需要append进去；
						plus.webview.currentWebview().append(ad);
						ad.addEventListener('loaded', function() {
							ad.setStyle({
								bottom: '0',
								transition: {
									duration: 150
								}
							});
						});
					} else {
						ad.addEventListener('loaded', function() {
							ad.show('slide-in-bottom');
						});
					}
					ad.appendJsFile('_www/js/ad.js');
					//设置主页面的底部留白，否则会被遮住；
					document.querySelector('.mui-content').style.paddingBottom = adHeight + 'px';
				}
			}
			var myBox = document.getElementById("my");
			mui.plusReady(function() {
				renderChart();
				myBox.innerHTML = getMy();
				myBox.addEventListener('tap', function() {
					myBox.innerHTML = getMy();
				});
				//baiduAd();
				/*var url = "http://www.niusb.com/bdssp.txt"; // 下载文件地址
				var dtask = plus.downloader.createDownload(url, {}, function(d, status) {
					if (status == 200) { // 下载成功
						var path = d.filename;
						console.log(d.filename);
						var url = 'itms-apps://itunes.apple.com/cn/app/hello-h5+/id682211190?l=zh&mt=8'; // HelloH5应用在appstore的地址
						plus.runtime.openURL(url);
					} else { //下载失败
						alert("Download failed: " + status);
					}
				});
				dtask.start();*/
			});
		</script>
	</body>

</html>